<template>
  <div>
    <navbar>
      <div slot="center">论坛详情</div>
      <div slot="left" class="left-img">
          <img @click="fan" src="../../assets/img/la.png" />
      </div>
    </navbar>
    <div class="PageA">
      <div class="substance">
        <h2>帖子主题，一起去旅行！</h2>
        <div class="portrait">
          <div class="call">头像</div>
          <div class="call1">
            <span>小芳</span>
            <span>十分钟前</span>
          </div>
        </div>
        <div class="want">
          <span>主要内容：</span>
          <p>
            orem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
            euismod bibendum laoreet. Proin gravida dolor sit amet lacus
            accumsan et viverra justo commodo. Proin sodales pulvinar tempor.
            Cum sociis natoque penatibus et magnis dis parturient montes,
            nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra
            vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.
          </p>
        </div>

        <div>
          <span>回复（{{ list.length }}）</span>
          <div class="partner" v-for="item in list" :key="item.id">
            <div class="siteinfo">
              <div class="siteinfoA">{{ item.portrait }}</div>
              <div class="siteinfoB">
                <div class="siteinfoC">
                  <span>{{ item.text }}</span>
                  <span>{{ item.text1 }}</span>
                  <span>{{ item.text2 }}</span>
                  <span>{{ item.text3 }}</span>
                </div>
                <div class="siteinfoD">{{ item.text4 }}</div>
                <div class="siteinfoE">{{ item.text5 }}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="footer">
          <input type="text" placeholder="回复" v-model="props.text4" />
          <button class="footerA" @click="fasong()">发送</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import navbar from "../../components/navbar/navbar";
export default {
  name: "ForumDetail",
  components: {
    navbar,
  },
  methods: {
    fan() {
      this.$router.back();
    },
    fasong() {
      let newsbj = {
        portrait: this.props.portrait,
        text4: this.props.text4,
        text: this.props.text,
        text3: this.props.text3,
        text2: this.props.text2,
        text1: this.props.text1,
        text5: this.props.text5,
      };
      this.props.text4 = ""; //清空输入框内容
      this.list.push(newsbj);
    },
  },
  data() {
    return {
      props: {
        id: "",
        text5: "5分钟前",
        text4: "", //input v-model（双向绑定）这个值，这样就可以改变它的值了
        text3: "喜欢旅游",
        text2: "有房一族",
        text1: "钻石会员",
        text: "帅哥",
        portrait: "头像",
      },
      list: [
        {
          id: 1,
          reply: "回复",
          num: "10",
          portrait: "头像",
          text: "帅哥",
          text1: "钻石会员",
          text2: "有房一族",
          text3: "喜欢旅游",
          text4: "美女，我们交往呗！",
          text5: "5分钟前",
        },
        {
          id: 2,
          portrait: "头像",
          text: "帅哥",
          text1: "钻石会员",
          text2: "有房一族",
          text3: "喜欢旅游",
          text4: "美女，我们交往呗！",
          text5: "5分钟前",
        },
        {
          id: 3,
          portrait: "头像",
          text: "帅哥",
          text1: "钻石会员",
          text2: "有房一族",
          text3: "喜欢旅游",
          text4: "美女，我们交往呗！",
          text5: "5分钟前",
        },
        {
          id: 4,
          portrait: "头像",
          text: "帅哥",
          text1: "钻石会员",
          text2: "有房一族",
          text3: "喜欢旅游",
          text4: "美女，我们交往呗！",
          text5: "5分钟前",
        },
        {
          id: 5,
          portrait: "头像",
          text: "帅哥",
          text1: "钻石会员",
          text2: "有房一族",
          text3: "喜欢旅游",
          text4: "美女，我们交往呗！",
          text5: "5分钟前",
        },
      ],
    };
  },
};
</script>
<style scoped>
.substance {
  height: calc(100vh - 60px - 50px);
  position: absolute;
  overflow-y: scroll;
  top: 50px;
  padding: 0 10px;
  flex-flow: column;
  display: flex;
  text-align: left;
}

.substance h2 {
  font-weight: 500;
  margin: 15px 0;
}

.portrait {
  display: flex;
  flex-flow: row;
  height: 70px;
  margin: 15px 0;
}

.call {
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid black;
}

.call1 {
  flex: 1;
  margin-left: 15px;
  display: flex;
  flex-flow: column;
}

.call1 span:nth-of-type(1) {
  margin-top: 25px;
}

.want {
  display: flex;
  margin: 15px 0;
  flex-flow: column;
}

.want span {
  font-weight: 500;
  margin: 15px 0;
}

.want p {
  flex: 1;
  line-height: 20px;
}

.partner {
  flex-flow: column;
  display: flex;
  border-bottom: 1px solid black;
}

.partner span:nth-of-type(1) {
  margin: 10px 0;
}

.siteinfo {
  margin: 15px 0;
  display: flex;
  flex-flow: row;
}

.siteinfoA {
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 50px;
  border: 1px solid black;
}

.siteinfoB {
  margin: 0 0 0 10px;
  display: flex;
  flex-flow: column;
}

.siteinfoC span {
  margin-left: 5px;
}

.siteinfoC span:nth-of-type(2) {
  color: aliceblue;
  background-color: cornflowerblue;
}

.siteinfoC span:nth-of-type(3) {
  color: aliceblue;
  background-color: rgb(23, 76, 173);
}

.siteinfoC span:nth-of-type(4) {
  color: aliceblue;
  background-color: rgb(211, 69, 44);
}

.footer {
  background-color: rgb(182, 182, 182);
  bottom: 0px;
  left: 0;
  width: 100%;
  position: fixed;
  flex-flow: row;
  display: flex;
  height: 60px;
}

.footer input {
  font-size: 18px;
  padding-left: 15px;
  border-radius: 50px;
  border: none;
  margin: 10px 0px 10px 15px;
  height: 40px;
  flex: 1;
  display: flex;
  outline: none;
}

.footer button {
  line-height: 40px;
  margin-left: 20px;
  color: black;
  font-size: 18px;
}

.footerA {
  border: none;
  background-color: transparent;
  line-height: 60px;

  margin: 0 30px;
  font-size: 18px;
  font-weight: 500;
}
</style>
